<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>语若认证中心</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,maximum-scale=1,user-scalable=0,initial-scale=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
</head>

<style>

    .login-container {
        margin-top: 40%;
    }

    .form-title {
        text-align: center;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-title-box {
        display: flex;
        justify-content: center;
        height: 30px;
    }

    .form-title-img-box {
        height: 30px;
        width: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-title-img {
        height: 30px;
        width: 30px;
    }

    .content-box {
        margin-top: 50px;
        width: 100%;
        text-align: center;
    }

    input::placeholder {
        padding: 10px;
        line-height: 30px;
    }

    input {
        border: none;
        outline:none; /* 防止点击出现默认的边框 */
        width: 80%;
        height: 46px;
        border-radius: 3px;
        font-size: 16px;
        background-color: #F8F8FA;
        text-indent: 1em;
    }

    .submit-btn {
        font-size: 16px;
        height: 40px;
        border-radius: 20px;
        width: 80%;
        margin-top: 50px;
    }

    button {
        border: none;
        color: #FFFFFF;
        background-color: #5A90FA;
    }

    button:active {
        background-color: #3269DC;
    }
</style>
<body>
<div class="login-container">
    <div class="form-container">
        <form class="form-box" method="post" action="/login">
            <div class="form-title-box">
                <div class="form-title-img-box">
                    <img class="form-title-img" th:src="@{/images/safeIcon.png}">
                </div>
                <h2 class="form-title">语若认证中心</h2>
            </div>
            <div class="content-box">
                <p class="content-item">
                    <input type="text" value="leron" id="username" name="username" class="form-control" placeholder="输入账号/邮箱" required>
                </p>
                <p class="content-item">
                    <input type="password" id="password" value="123456" name="password" class="form-control" placeholder="输入密码" required>
                </p>
                <div th:if="${param.error}">
                    <div class="alert alert-danger" role="alert" style="color: red">
                        用户名或密码错误，请重新尝试。
                    </div>
                </div>
                <button class="content-item submit-btn" type="submit">登 &nbsp;&nbsp; 录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
